
<template>
  <div class="card" style="margin-bottom: 10px">
    <el-input style="width: 300px; margin-right: 10px"  v-model="data.name" placeholder="请输入课程名称查询" :prefix-icon="Search"/>
    <el-input style="width: 300px; margin-right: 10px" v-model="data.descr" placeholder="请输入课程描述查询" :prefix-icon="Search"/>
    <el-input style="width: 300px" v-model="data.teacher" placeholder="请输入课程老师查询" :prefix-icon="Search"/>
    <el-button type="primary" style="margin-left: 10px" @click="load" >查询</el-button>
    <el-button type="info"  @click="reset">重置</el-button>


  </div>
  <div class="card"  style="margin-bottom: 10px">
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <span style="padding-left: 40%">课程管理</span>

  </div>

  <div class="card" style="margin-bottom: 10px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="170" />
      <el-table-column prop="name" label="课程名称" width="170" />
      <el-table-column prop="no" label="课程编号" width="170" />
      <el-table-column prop="descr" label="课程描述" width="170" />
      <el-table-column prop="times" label="课时" width="170" />
      <el-table-column prop="teacher" label="任课老师 " width="170" />
      <!--      <el-table-column必须加width不然会报错-->
      <el-table-column width="170">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="dele(scope.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

  </div>
  <div class="card" style="margin-bottom: 10px">
    <!--绑定分页插件,点击分页事件-->
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />


  </div>
  <el-dialog width="35%" v-model="data.formVisible" title="课程信息">
    <el-form :model="data.form" label-width="100px" label-position="right" style="padding-right: 30px">
      <el-form-item label="课程名称" >
        <el-input v-model="data.form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程编号" >
        <el-input v-model="data.form.no" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程描述" >
        <el-input v-model="data.form.descr" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课时" >
        <el-input v-model="data.form.times " autocomplete="off" />
      </el-form-item>
      <el-form-item label="任课老师" >
        <el-input v-model="data.form.teacher" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">
          保 存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup>


import {reactive} from "vue";
import {  Search } from '@element-plus/icons-vue'
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";

const data =reactive({
  name:'',
  descr:'',
  teacher:'',
  tableData:[],
  total: 0,
  pageSize: 6,
  pageNum: 1
})

const load = () =>{
  request.get('/selectPage',{
    params:{
      pageNum: data.pageNum,
      pageSize:data.pageSize,
      name:data.name,
      descr:data.descr,
      teacher:data.teacher,
      formVisible:false,
      form:{}

    }
  }).then(res=>{
    console.log(res.data.data.total)
    data.tableData=res.data.data?.list ||[]
    data.total=res.data.data.total || 0

  })


}


load()
const handelCurrentChange =(pageNum)=>{
  //当翻页当时候从新加载数据
  load()

}

const reset = () =>{
  data.name = ''
  data.descr = ''
  data.teacher = ''
  load()
}


const handleAdd = () =>{
  data.form= {}
  //清空数据
  data.formVisible =true
  //打开弹窗

}


//编辑信息
//保存信息
const save =()=>{
  request.request({
    url: data.form.id ? '/update':'/add',
    method: data.form.id ? 'PUT': 'POST',
    data:data.form

  }).then(res=>{

    if (res.data.code===1){
      //重新获取数据
      load()
      data.formVisible=false  //关闭弹窗
      ElMessage.success( "操作成功")

    }else {
      console.log(res)
      ElMessage .error("操作失败")
    }




  })

}

const handleEdit =(row)=>{
  data.form =JSON.parse(JSON.stringify(row))//进行深层拷贝到form里
  data.formVisible =true//打开弹窗



}

const dele =(id)=>{
  //确认信息
  ElMessageBox.confirm('删除该数据后该数据无法恢复，您确定删除吗？','删除确认',{
    type:'warning'
  }).then(res=>{
    request.delete('/delete/'+id).then(res=>{
      //记得加斜杆/delete/
      if (res.data.code===1){
        load()
        ElMessage.success( "操作成功")

      }else {
        console.log(res)
        ElMessage .error("操作失败")
      }
    })
  }).catch(() => {
    ElMessage({

      type: 'info',
      message: 'Delete canceled'
    })
  })

}


</script>






<style scoped>

</style>

